<template>
	<view class="address-content bg-white">
		<!--标题栏-->
		<bar-title bgColor='bg-white'>
			<block slot="content">{{addressId?'编辑':'添加'}}收货地址</block>
		</bar-title>
		
		
		<view class="address-from padding-left">
			<view class="row b-b">
				<text class="tit">收货人</text>
				<input class="input" type="text" 
					v-model="postalName" 
					placeholder="收货人姓名" 
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">手机号码</text>
				<input class="input" type="number" 
					v-model="phone" 
					placeholder="收货人手机号码" 
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">所在地区</text>
				<view @click="showMulLinkageThreePicker" class="input">
					<text class="text-gray" v-if="!pickerText">请选择所在地区</text>
					<text v-else>{{pickerText}}</text>
				</view>
				<text class="cuIcon-location margin-left-xs"></text>
			</view>
			<view class="row b-b"> 
				<text class="tit">详细地址</text>
				<input class="input" type="text" 
					v-model="address" 
					placeholder="楼号、门牌" 
					placeholder-class="placeholder" />
			</view>
			
			<view class="row b-b default-row">
				<text class="tit">设为默认</text>
				<switch class="cyan"
					:class="isDefault?'checked':''" 
					:checked="isDefault?true:false"
					@change="switchChange"  />
			</view>
		</view>
		
		
		<mpvue-city-picker  ref="mpvueCityPicker" 
			themeColor="#1cbbb4" 
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
		></mpvue-city-picker>
		
		<!-- 底部 -->
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white shadow foot" >
			<view class="cu-bar btn-group">
				<button class="cu-btn shadow-blur round lg"
					v-if="addressId"
					@click="delAddress"
				>删除</button>
				
				<button class="cu-btn bg-cyan shadow-blur round lg"
					@click="confirm"
				>保存并使用</button>
			</view>
		</view>
	</view>
</template>

<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import cityData from '@/common/city.data.js';
import { Address } from '@/models/address.js';
let address = new Address()
export default {
	components:{
		mpvueCityPicker
	},
	data() {
		return {
			addressId: '',
			isDefault: false,
			postalName: '',
			provinceName: '',
			cityName: '',
			areaName: '',
			address: '',
			phone:'',
			cityPickerValueDefault: [0, 0, 1],
			pickerText: '',
		}
	},
	onLoad(option){
		if(option.type==='edit'){
			let addressData = JSON.parse(option.data)
			this.formatAddress(addressData)
		}
		this.manageType = option.type;
	},
	methods: {
		switchChange(e){
			this.isDefault = e.detail.value
		},
		
		delAddress() {
			this.$mTool.showModal({
				title: '提示',
				content: '确定要删除这条收货地址吗？',
				cancelText: '再看看',
				confirmText: '再见',
				success: res => {
					if (res.confirm) {
						address.delAddress(this.addressId).then(() => {
							uni.showToast({
								title: '删除成功',
								icon: 'none',
								mask: true
							})
							this.$store.commit('setStateAttr', {
								key: 'selectAddress',
								val: {}
							})
						})
						setTimeout(()=>{
							uni.navigateBack()
						}, 800)
					}
				}
			})
			
		},
		
		//提交
		async confirm(){
			let params = {
				provinceName: this.provinceName,
				cityName: this.cityName,
				areaName: this.areaName,
				address: this.address,
				phone: this.phone,
				postalName: this.postalName,
				isDefault: this.isDefault? 1:0
			}	
			let checkRes = this.$graceChecker.check(params, 
				this.$formRuleConfig['address'])
			if (!checkRes) {
				this.$mTool.showToast({
					title: this.$graceChecker.error,
					icon: 'none',
					mask: true
				})
				return
			}
			if(!this.addressId){
				await address.createAddress(params)
				this.$mTool.showToast({
					title: '添加成功',
					icon: 'none',
					mask: true
				})
			}else{
				params.addressId = this.addressId
				await address.editAddress(params)
				this.$mTool.showToast({
					title: '编辑成功',
					icon: 'none',
					mask: true
				})
			}
			// this.$store.commit('setStateAttr', {
			// 	key: 'selectAddress',
			// 	val: params
			// })
			setTimeout(()=>{
				uni.navigateBack()
			}, 800)
		},
		
		
		// 三级联动选择
		showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show()
		},
		onConfirm(e) {
			console.log(e);
			// this.pickerText = JSON.stringify(e)
			this.pickerText = e.label
			let cityArr =  e.label.split('-')
			this.provinceName = cityArr[0]
			this.cityName = cityArr[1]
			this.areaName = cityArr[2]
		},
		formatAddress(address) {
			
			this.addressId = address.addressId
			this.provinceName = address.provinceName
			this.cityName = address.cityName
			this.areaName = address.areaName
			this.address = address.address
			this.phone = address.phone
			this.postalName = address.postalName
			this.isDefault = address.isDefault
			this.pickerText = address.provinceName+'-'+address.cityName+'-'+address.areaName
		}
	},
	onBackPress() {
	  if (this.$refs.mpvueCityPicker.showPicker) {
		this.$refs.mpvueCityPicker.pickerCancel();
		return true;
	  }
	},
}
</script>

<style lang="scss">
	.address-content{
		height: 100vh;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding-right: 30rpx;
		height: 100rpx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			min-width: 140rpx;
			font-size: 30rpx;
			color: #333333;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
			text-align: right;
		}
		.icon-shouhuodizhi{
			font-size: 36rpx;
			color: #909090;
		}
	}
	.default-row{
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16rpx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
